<template>
	<div class="homeHeader">
		<div class="header-left"></div>
		<p class="title">Cesium Template</p>
		<div class="header-right">
			<div class="curDate">
				<div class="curWeek">{{ week }}</div>
				<div class="curDay">{{ year }}</div>
			</div>
			<div class="curHour">{{ time }}</div>
			<div class="line"></div>
			<div class="name">
				<div class="role" :title="username">{{ username }}</div>
				<div class="partment" :title="department">{{ department }}</div>
			</div>
			<div class="user-img"></div>
			<div class="quit"></div>
			<!-- <div class="quit" @click="quitLogin"></div> -->
		</div>
	</div>
</template>

<script>
export default {
	name: 'HomeHeader',
	data() {
		return {
			time: '',
			year: '',
			week: '',
			username: 'admin',
			department: '中科星图',
		};
	},
	created() {
		this.getDate();
		// let info = localStorage.getItem('userInfo')
		// this.username = JSON.parse(info).username
		// this.department = JSON.parse(info).department
	},
	methods: {
		getDate() {
			setInterval(() => {
				const date = new Date();
				const hour = date.getHours();
				const minute = date.getMinutes();
				const second = date.getSeconds();
				const month = date.getMonth() + 1;
				const today = date.getDate();
				this.time = timeToString(hour) + ':' + timeToString(minute) + ':' + timeToString(second);
				this.year = date.getFullYear() + '-' + timeToString(month) + '-' + timeToString(today);
				const weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				this.week = weekday[date.getDay()];
				function timeToString(nowTime) {
					if (nowTime < 10) {
						return '0' + nowTime;
					} else {
						return String(nowTime);
					}
				}
			}, 1000);
		},
		quitLogin() {
			// location.reload()
			localStorage.clear();
			this.$router.push('/login');
		},
		toHome() {
			this.$router.push('/home');
		},
	},
};
</script>

<style lang="scss" scoped>
.homeHeader {
	width: 100%;
	height: 92px;
	position: absolute;
	top: 0;
	z-index: 100;
	background: url('~@/assets/images/header/标题框.png');
	background-size: 100% 100%;
	pointer-events: none;
	.header-left {
		margin: 4px 0px 0px 16px;
		img {
			&:nth-child(2) {
				margin: 10px 0px 0px 8px;
			}
		}
		.home {
			cursor: pointer;
			pointer-events: all;
		}
	}
	.title {
		font-size: 35px;
		font-weight: 600;
		text-align: left;
		color: #ffffff;
		text-shadow: 0px 4px 4px 0px #000000;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		background-image: -webkit-linear-gradient(bottom, #72e5e5, #ffffff);
		display: inline-block;
		text-align: center;
		vertical-align: top;
		margin-top: 6px;
		width: 100%;
	}
	.header-right {
		position: absolute;
		right: 20px;
		top: 10px;
		height: 40px;
		line-height: 40px;
		color: #e7f5f5;
		.curHour {
			display: inline-block;
			overflow: hidden;
			margin: auto 8px;
			font-size: 38px;
			font-weight: 400;
			text-align: center;
			line-height: 40px;
			vertical-align: top;
			font-family: DS-Digital;
			color: rgba(0, 251, 251, 0.9);
			width: 130px;
		}
		.curDate {
			display: inline-block;
			font-size: 12px;
			overflow: hidden;
			vertical-align: top;
			.curWeek {
				height: 20px;
				line-height: 20px;
				text-align: center;
			}
			.curDay {
				height: 20px;
				line-height: 20px;
			}
		}
		.line {
			width: 1px;
			height: 38px;
			background: #d2d2d2;
			border-radius: 1px;
			display: inline-block;
			vertical-align: top;
		}
		.name {
			color: #e7f5f5;
			font-size: 12px;
			display: inline-block;
			width: 60px;
			margin-left: 8px;
			vertical-align: super;
			overflow: hidden;
			.role,
			.partment {
				height: 20px;
				line-height: 20px;
			}
		}
		.user-img {
			background: url('~@/assets/images/header/user.png');
			display: inline-block;
			width: 30px;
			height: 30px;
			margin: 5px 8px;
			vertical-align: top;
		}
		.quit {
			width: 30px;
			height: 30px;
			margin: 5px auto;
			background: url('~@/assets/images/header/quit.png') no-repeat;
			background-size: 100% 100%;
			display: inline-block;
			cursor: pointer;
			pointer-events: all;
			vertical-align: top;
			&:hover {
				background: url('~@/assets/images/header/quit-ac.png');
			}
		}
	}
}
</style>
